<template>
  <!-- <div>
    <h1>{{state.count}}---{{state.age}}---{{state.name}}</h1>
    <button @click="handleAdd">add</button>
  </div>
  <div @click="changeFlag">
    <h2 v-if="flag">666</h2>
    <h2 v-else style="color:red">666</h2>
  </div> -->

  <!-- <div>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>
 <div>
   <h2 :class="{'red' :flag }" @click="ChangeClass">666</h2>
 </div> -->
 <div>
  <h2 v-show="show">hello</h2>
  <button @click="show = !show">visible</button>
 </div>
</template>

<script setup lang="ts">

const show = ref(true)
 import { ref,reactive } from 'vue'
//  let count =ref (0)
//  const changeFlag = () => {
//    flag.value = !flag.value
//  }
//  const flag = ref(true)
//  const state =reactive({
//    count: 0,
//    age:18,
//    name:'Tom'
//  })
//  const handleAdd = () => {
//    state.count++
//    state.age++
//  }
const flag =ref(true)
const ChangeClass = () => {
  flag.value = !flag.value
}

const list =['html','css ','js']
</script>

<style lang="css" scoped>
.red{
  color:red;
}
</style>